<template>
  <div>
    <h1>v-for列表渲染指令</h1>
    <h2>数组渲染</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
    <h2>对象渲染</h2>
    <ul>
      <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
    </ul>
    <h2>数组对象渲染</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in itemss" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const itemss = reactive([
  { id: 1, name: "张三", age: 25 },
  { id: 2, name: "李四", age: 30 },
  { id: 3, name: "王五", age: 28 }
]);
// 定义响应式对象
const user = reactive({
  name: "张三",
  age: 25
});
// 定义响应式数组
const items = reactive([
  { id: 1, name: "项目1" },
  { id: 2, name: "项目2" },
  { id: 3, name: "项目3" }
]);

// 定义响应式变量
// const num1 = ref(0);
// const num2 = ref(0);
// const operator = ref("add");
// const result = ref(0);

// 计算函数
// const calculate = () => {
//   const num1Value = parseFloat(num1.value);
//   const num2Value = parseFloat(num2.value);
//   if (isNaN(num1Value) || isNaN(num2Value)) {
//     alert("请输入有效的数字！");
//     return;
//   }

//   switch (operator.value) {
//     case "add":
//       result.value = num1Value + num2Value;
//       break;
//     case "subtract":
//       result.value = num1Value - num2Value;
//       break;
//     case "multiply":
//       result.value = num1Value * num2Value;
//       break;
//     case "divide":
//       if (num2Value === 0) {
//         alert("除数不能为零！");
//         return;
//       }
//       result.value = num1;
//   }
// };
// 定义响应式数组

// const users = ref([
//   { id: 1, name: "张三", age: 25 },
//   { id: 2, name: "李四", age: 30 },
//   { id: 3, name: "王五", age: 28 }
// ]);
// const items = ref([
//   { id: 1, name: "项目1" },
//   { id: 2, name: "项目2" },
//   { id: 3, name: "项目3" }
// ]);
</script>
<style>
th,
td {
  text-align: center;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}
</style>
